<!DOCTYPE html>
<html>
<head>
    <meta content="text/html; charset=UTF-8" http-equiv="content-type">
    <title>在线使图片变灰色</title>
    <link rel="stylesheet" href="images/style.css">
    <script type="text/javascript" src="images/jquery.js"></script>

</head>
<body>

<div class="wrap">
    <div class="head">
        <h1>
            <a href="http://2kid.org" title="2Kid">2Kid </a>
        </h1>

        <h2>关注web、关注前端</h2>
    </div>
    <div class="banner">
        <h3>在线使图片变灰色</h3>
    </div>
    <div class="content dometop">
        <div class="box domepage">
            <h4>示例</h4>

            <p>说明：需要在chrome，火狐，opear最新版本上运行。 2011.9.13</p>

            <div class="cont">
                <input type="file" id="files" multiple="multiple">

                <div id='hk'></div>

                <script type="text/javascript">
                    (function() {
                        var inputElement = document.getElementById("files");
                        inputElement.addEventListener("change", handleFiles, false);
                        function handleFiles(e) {
                            if (!location.protocol.match(/^http/) && navigator.appVersion.indexOf('WebKit') > -1) {
                                alert('请把文件放在服务器上运行');
                            }
                            var fileList = e.target.files;
                            for (var i = 0; i < fileList.length; i++) {
                                var file = fileList[i];
                                var imageType = /image.*/;
                                if (!file.type.match(imageType)) {
                                    continue;
                                }
                                var reader = new FileReader();
                                reader.readAsDataURL(file);
                                reader.onload = function(e, i) {
                                    var dataURI = e.target.result;
                                    var oImage = new Image();
                                    oImage.onload = function() {
                                        creatGrayimg(oImage, oImage.width, oImage.height);
                                    }
                                    oImage.src = dataURI;

                                    var oImg = document.createElement('img');
                                    oImg.src = dataURI;
                                    document.getElementById('hk').appendChild(oImg);
                                }
                            }
                        }

                        function creatGrayimg(oimg, w, h) {
                            var canvas = document.createElement('canvas');
                            canvas.width = w;
                            canvas.height = h;
                            canvas.style.display = '';
                            var ctx = canvas.getContext("2d");
                            ctx.drawImage(oimg, 0, 0, w, h);
                            var imgData = ctx.getImageData(0, 0, w, h);
                            imgData = gray(imgData);
                            ctx.putImageData(imgData, 0, 0);

                            var oImg = document.createElement('img');
                            oImg.src = canvas.toDataURL();
                            document.getElementById('hk').appendChild(oImg);
                        }

                        function gray(imgdata) {
                            var data = imgdata.data;
                            for (var i = 0,n = data.length; i < n; i += 4) {
                                var grayVal = (data[i  ] + data[i + 1  ] + data[i + 2 ]) / 3;
                                data[i  ] = grayVal;
                                data[i + 1  ] = grayVal;
                                data[i + 2  ] = grayVal;
                            }
                            return imgdata;
                        }
                    })();
                </script>

            </div>
        </div>
        <div class="box domelist">
            <h4>dome列表</h4>

            <div class="cont">
                <ul>
                    <li><a href="FileReader.html">FileReader API</a></li>
                    <li><a href="CSSsprites.html">CSS sprites在线javascript版</a></li>
                    <li><a href="gray.html.html">在线使图片变灰色</a></li>
                </ul>
            </div>
        </div>
        <div class="box codepage">
            <h4>代码</h4>

            <pre class="cont">
&lt;input type="file" id="files" multiple="multiple"&gt;
&lt;div id='hk'&gt;&lt;/div&gt;

&lt;script type="text/javascript"&gt;
    var inputElement = document.getElementById("files");
	inputElement.addEventListener("change", handleFiles, false);
    function handleFiles(e){
        if(!location.protocol.match(/^http/)&amp;&amp;navigator.appVersion.indexOf('WebKit')&gt;-1){
            alert('请把文件放在服务器上运行');
        }
        var fileList=e.target.files;
        for (var i = 0; i &lt; fileList.length; i++) {
            var file = fileList[i];
            var imageType = /image.*/;
            if (!file.type.match(imageType)) {
                continue;
            }
            var reader = new FileReader();
                reader.readAsDataURL(file);
                reader.onload = function(e,i){
                    var dataURI=e.target.result;
                    var oImage=new Image();
                    oImage.onload=function(){
                        creatGrayimg(oImage,oImage.width,oImage.height);
                    }
                    oImage.src=dataURI;

                    var oImg=document.createElement('img');
                        oImg.src=dataURI;
                        document.getElementById('hk').appendChild(oImg);
                }
        }
    }
    function creatGrayimg(oimg,w,h){
        var canvas = document.createElement('canvas');
        canvas.width=w;
        canvas.height=h;
        canvas.style.display='';
        var ctx = canvas.getContext("2d");
        ctx.drawImage(oimg,0,0,w,h);
        var imgData= ctx.getImageData(0,0,w,h);
        imgData= gray(imgData);
        ctx.putImageData(imgData,0,0);

        var oImg=document.createElement('img');
            oImg.src=canvas.toDataURL();
            document.getElementById('hk').appendChild(oImg);
    }
    function gray(imgdata){
        var data=imgdata.data;
        for (var i = 0,n =data .length;  i &lt;n; i += 4) {
            var grayVal = (data[i  ]+data[i+1  ]+data[i +2 ])/3 ;
                data[i  ] = grayVal;
                data[i+1  ] =grayVal ;
                data[i+2  ] = grayVal;
        }
        return imgdata;
    }
&lt;/script&gt;


            </pre>
        </div>

    </div>
    <div class="foot">
        Copyright © 2011 <strong>2Kid</strong> |
        Powered by <a target="bank" href="http://wordpress.org/">WordPress</a> |
        Theme by <a target="bank" href="http://2kid.org">2Kid</a>
    </div>
</div>
<script type="text/javascript" src="images/dome.js"></script>
</body>
</html>